<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id ="root">

      <!--
      2.事件修饰符
        @click.prevent：阻止标签本身事件
        @click.stop：阻止事件冒泡
        @click.once：事件只触发一次
        @click.self：只有event.target是当前操作的元素时才触发事件
        @wheel：事件的默认行为立即执行
        -->
      <!--阻止标签本身事件 prevent-->
      <a href="http://www.baidu.com" @click.prevent="showInfo">点击我弹出提示信息</a>
      <div class="demo" @click="showInfo">
          <!--阻止事件冒泡-->
        <button @click.stop="showInfo">点击我弹出提示信息1</button>
          <!--修饰符可以连续写-->
          <a href="http://www.baidu.com" @click.stop.prevent="showInfo">点击我弹出提示信息1</a>

      </div>
      <!--事件只触发一次-->
      <button @click.once="showInfo">点击我弹出提示信息</button>
      <!--事件捕获，在事件捕获的时候触发-->
      <div class="box" @click.capture="showInfo1(1)">
          div
          <div class="box1" @click="showInfo1(2)">
              div2
          </div>
      </div>
      <!--只有event.target是当前操作的元素时才触发事件-->
      <div class="box" @click.self="showInfo1">
          <button @click="showInfo1">点击我弹出提示信息</button>
      </div>
      <!--事件的默认行为立即执行，无需等待事件回调执行完-->
      <ul class="list" @wheel="showInfo2">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
      </ul>
  </div>
</body>
<script type="text/javascript">
  var vm = new Vue({
      el:'#root',
      data:{
        name:'智慧城'
      },
      methods:{
          showInfo(e) {
              alert("你好")
          },
          showInfo1(e) {
             alert(e.target)
          },
          showInfo2(e) {
              for (let i = 0; i <10000 ; i++) {
                  console.log("@")
              }
          }
      }
  })
</script>
<style>
    *{
        margin-top: 10px;
    }
    .demo{
        height: 50px;
        background-color: aqua;
    }
    .box{
        background-color: aliceblue;
    }

    .box1{
        background-color: bisque;
    }

    .list{
        background-color: chartreuse;
        height: 400px;
        overflow: auto;
    }

    li{
        height: 150px;
        background-color: blue;
    }
</style>
</html>